<template>
  <div>
    <div class="box" :style="'padding-left: 10px'">
      <div class="blaek" v-if="loding"></div>
      <div class="top_box">
        <div class="top_in">
          <div class="insj">
            <el-checkbox
              v-model="checked1"
              @change="inp1()"
              size="small"
              style="margin-right: 10px"
              >时间范围</el-checkbox
            ><t-date-range-picker
              :disabled="flay"
              v-model="riqi"
              style="width: 250px"
            />
          </div>
          <div class="ingj">
            <el-checkbox v-model="checked2" @change="inp1()" size="small"
              >高级条件</el-checkbox
            >
          </div>
          <div class="ingj">
            <el-select
              v-model="value1"
              @change="inputcli()"
              placeholder="按天分析"
              :disabled="!flay"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="value2"
              :disabled="!flay"
              @change="inputc"
              placeholder="按天分析"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="ingj" style="margin-left: 0; font-size: 12px">
            组织架构
            <el-select v-model="value3" placeholder="按天分析">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="btn">
            <el-button @click="cz()">重置</el-button>
            <el-button type="primary" @click="cx()">查询</el-button>
          </div>
        </div>
      </div>
      <div class="zhuyao">
        <div class="til">关键指标</div>
        <div class="tilbox">
          <div class="tiitem">
            {{ zxtime.timez }}<ChevronDownIcon /><br />
            <span class="niuw"> 咨询小时数</span>
            <div class="hov1" style="width: 350px">
              <div class="item_c">
                <div class="ad">{{ zxtime.timem }}</div>
                <div class="eas">
                  面对面咨询 <br />
                  （小时）
                </div>
              </div>
              <div class="item_c">
                <div class="ad">{{ zxtime.times }}</div>
                <div class="eas">
                  电话咨询 <br />
                  （小时）
                </div>
              </div>
              <div class="item_c">
                <div class="ad">0</div>
                <div class="eas">
                  视频咨询 <br />
                  （小时）
                </div>
              </div>
              <div class="item_c" style="margin-right: 0">
                <div class="ad">{{ zxtime.timezc }}</div>
                <div class="eas">
                  驻场咨询 <br />
                  （小时）
                </div>
              </div>
            </div>
          </div>
          <div class="tiitem">
            {{ zx2 }} <br />
            <span class="niuw">咨询总人数</span>
          </div>
          <div class="tiitem">
            {{ zx3.zx33 }}<ChevronDownIcon /><br />
            <span class="niuw">咨询个案数</span>
            <div class="hov1" style="width: 160px">
              <div class="item_c">
                <div class="ad">{{ zx3.zx31 }}</div>
                <div class="eas">
                  危机个案 <br />
                  （小时）
                </div>
              </div>
              <div class="item_c" style="margin-right: 0">
                <div class="ad">{{ zx3.zx32 }}</div>
                <div class="eas">
                  一般咨询 <br />
                  （小时）
                </div>
              </div>
            </div>
          </div>
          <div class="tiitem">
            {{ zx4 }} <br />
            <span class="niuw">管理者咨询 <br />（人次）</span>
          </div>
          <div class="tiitem">
            {{ zx5 }} <br />
            <span class="niuw">热线咨询 <br />（次）</span>
          </div>
          <!-- <div class="tiitem">
            1111 <br />
            <span class="niuw">主管转介个案 <br />（人次）</span>
          </div> -->
        </div>
      </div>
      <div class="zhuyao">
        <div class="til each_title">
          咨询量趋势分析
          <!-- <el-select v-model="value4" placeholder="按天分析">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </div>
        <div class="eca" style="width: 100%">
          <div id="chart_19"></div>
        </div>
      </div>
      <div class="boxgg">
        <div class="echats-box">
          <div class="echats-title">
            资源主题占比分析（top10）
            <el-select
              v-model="zxzt"
              placeholder=""
              @change="zxztxl"
              style="width: 90px; float: right; margin-top: 5px"
            >
              <el-option
                v-for="item in rensc"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="echats-item">
            <div id="chart_20"></div>
          </div>
          <div class="baitiao"></div>
        </div>
        <div class="echats-box">
          <div class="echats-title">危机占比</div>
          <div class="echats-item">
            <div id="chart_21"></div>
          </div>
          <div class="baitiao"></div>
        </div>
      </div>
      <div class="zhuyao">
        <div class="til each_title">
          咨询服务形式
          <el-select
            v-model="zxfw"
            placeholder=""
            @change="zxfwxl"
            style="width: 90px; float: right; margin-top: 5px"
          >
            <el-option
              v-for="item in renfw"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="eca" style="margin-top: 25px">
          <div id="chart_22"></div>
        </div>
      </div>
      <div class="zhuyao">
        <div class="til each_title">
          咨询人员信息占比
          <el-select
            v-model="zxry"
            placeholder=""
            @change="zxryxl"
            style="width: 90px; float: right; margin-top: 5px"
          >
            <el-option
              v-for="item in renry"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="eca_1">
          <div class="casboxq">
            <div id="chart_23"></div>
            <div id="chart_24"></div>
            <div id="chart_25"></div>
          </div>
          <div class="casboxq">
            <div id="chart_26"></div>
            <div id="chart_27" style="width:64%"></div>
            <!-- <div id="chart_28"></div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted,onActivated ,onDeactivated} from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import { ChevronDownIcon } from "tdesign-icons-vue-next";
import { getOrg } from "../../api/analyse";
import {
  getHourses,
  totalNumber,
  cases,
  managerConsult,
  hotline,
  trend,
  getTopicCountByHourses,
  getTopicCountByTimes,
  crisis,
  serviceByTimes,
  consultPersonInfoByGender,
  consultPersonInfoByAge,
  consultPersonInfoByArea,
  consultPersonInfoByRe,
  consultPersonInfoByCname,
  consultPersonInfoByDepartment,
} from "../../api/crisis";
import {
  chart_19,
  chart_20,
  chart_21,
  chart_22,
  chart_23,
  chart_24,
  chart_25,
  chart_26,
  chart_27,
  chart_28,
} from "../../echats/Current";
import * as echarts from "echarts";
const activeIndex = ref("/centre/platformO");
const value1 = ref("1");
const value2 = ref("30");
const value3 = ref("1");
const value4 = ref("近7天");
const breakoff=ref(false)
let checked2 = ref(true);
let checked1 = ref(false);
let Echart_1 = ref(null);
let Echart_2 = ref(null);
let Echart_3 = ref(null);
let Echart_4 = ref(null);
let Echart_5 = ref(null);
let Echart_6 = ref(null);
let Echart_7 = ref(null);
let Echart_8 = ref(null);
let Echart_9 = ref(null);
let Echart_10 = ref(null);
let loding = ref(true);
let zlzl = ref(0);
let riqi = ref([]);
let fwrs = ref(0);
let rensc = ref([
  {
    value: "1",
    label: "按人次",
  },
  {
    value: "2",
    label: "按小时",
  },
]);
let renfw = ref([
  {
    value: "1",
    label: "按人次",
  },
  {
    value: "2",
    label: "按小时",
  },
]);
let renry = ref([
  {
    value: "1",
    label: "按人次",
  },
  {
    value: "2",
    label: "按小时",
  },
  {
    value: "3",
    label: "按人数",
  },
]);
let zxzt = ref("1");
let zxfw = ref("1");
let zxry = ref("1");
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
const options = [
  {
    value: "1",
    label: "按天分析",
  },
  {
    value: "2",
    label: "按月度",
  },
  {
    value: "3",
    label: "按季度",
  },
  {
    value: "4",
    label: "按年度",
  },
];
let options1 = ref([
  {
    value: "7",
    label: "近7天",
  },
  {
    value: "30",
    label: "近30天",
  },
  {
    value: "90",
    label: "近90天",
  },
]);
let flay = ref(true);
const options2 = ref([
  {
    value: "1",
    label: "全部",
  },
]);
const options3 = [
  {
    value: "近7天",
    label: "近7天",
  },
  {
    value: "近30天",
    label: "近30天",
  },
];
const inputcli = () => {
  if (value1.value === "1") {
    options1.value = [
      {
        value: "7",
        label: "近7天",
      },
      {
        value: "30",
        label: "近30天",
      },
      {
        value: "90",
        label: "近90天",
      },
    ];
    value2.value = "30";
  } else if (value1.value === "2") {
    options1.value = [
      {
        value: "6",
        label: "近6个月",
      },
      {
        value: "12",
        label: "近12个月",
      },
    ];
    value2.value = "6";
  } else if (value1.value === "3") {
    options1.value = [
      {
        value: "1",
        label: "近一个季度",
      },
      {
        value: "2",
        label: "近两个季度",
      },
      {
        value: "3",
        label: "近三个季度",
      },
      {
        value: "4",
        label: "近四个季度",
      },
    ];
    value2.value = "1";
  } else {
    options1.value = [
      {
        value: "1",
        label: "近一年",
      },
      {
        value: "2",
        label: "近两年",
      },
    ];
    value2.value = "1";
  }
};
const inp1 = () => {
  flay.value = !flay.value;
  if (flay.value) {
    checked1.value = false;
    checked2.value = true;
  } else {
    checked1.value = true;
    checked2.value = false;
  }
};
const inputc = (ev) => {
  value2.value = ev;
};
const riqijs = () => {
  // 获取今天的时间
  const today = new Date();
  // 获取未来第30天的时间
  const futureDate = new Date();
  futureDate.setDate(today.getDate() - 30);
  // 将时间格式化为字符串
  const todayStr = today.toISOString().slice(0, 10);
  const futureDateStr = futureDate.toISOString().slice(0, 10);
  // 输出结果
  riqi.value = [futureDateStr, todayStr];
};
let cp = ref(0);
let sc = ref(0);
let acsi = ref([]);
let dataarrq = ref([]);
let daflay = ref(true);
let stazt = ref("查看全部>");
//小时
let zxtime = reactive({
  timez: 0,
  timem: 0,
  times: 0,
  timezc: 0,
});
let zx2 = ref(0);
let zx3 = reactive({
  zx31: 0,
  zx32: 0,
  zx33: 0,
});
let zx4 = ref(0);
let zx5 = ref(0);
let zx6 = ref(0);
let tsy = ref("");
//重置
const cz = async () => {
  zxzt.value = "1";
  zxfw.value = "1";
  zxry.value = "1";
  value1.value = "1";
  value2.value = "30";
  flay.value = true;
  eac("重置");
};
//咨询主题分析切换
let zxztxl = async (ev) => {
  if (flay.value) {
    if (zxzt.value === "1") {
      //人次
      const res1 = await getTopicCountByTimes({
        param1: value1.value,
        param2: value2.value,
      });
      let ec21 = [];
      let ec22 = [];
      res1.data.forEach((item) => {
        if (Number(item.times) !== 0) {
          if (item.name === null) {
            ec21.push("其他");
            ec22.push({ name: "其他", value: Number(item.times) });
          } else {
            ec21.push(item.name);
            ec22.push({ name: item.name, value: Number(item.times) });
          }
        }
      });
      let option2 = chart_20();
      option2.legend.data = ec21;
      option2.series[0].data = ec22;
      Echart_2 = echarts.init(document.getElementById("chart_20"));
      Echart_2.setOption(option2);
    } else {
      //时间
      const res2 = await getTopicCountByHourses({
        param1: value1.value,
        param2: value2.value,
      });
      let ec21 = [];
      let ec22 = [];
      res2.data.forEach((item) => {
        if (Number(item.times) !== 0) {
          if (item.name === null) {
            ec21.push("其他");
            ec22.push({ name: "其他", value: Number(item.times) });
          } else {
            ec21.push(item.name);
            ec22.push({ name: item.name, value: Number(item.times) });
          }
        }
      });
      let option2 = chart_20();
      option2.legend.data = ec21;
      option2.series[0].data = ec22;
      Echart_2 = echarts.init(document.getElementById("chart_20"));
      Echart_2.setOption(option2);
    }
  } else {
    if (zxzt.value === "1") {
      //人次
      const res1 = await getTopicCountByTimes({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec21 = [];
      let ec22 = [];
      res1.data.forEach((item) => {
        if (Number(item.times) !== 0) {
          if (item.name === null) {
            ec21.push("其他");
            ec22.push({ name: "其他", value: Number(item.times) });
          } else {
            ec21.push(item.name);
            ec22.push({ name: item.name, value: Number(item.times) });
          }
        }
      });
      let option2 = chart_20();
      option2.legend.data = ec21;
      option2.series[0].data = ec22;
      Echart_2 = echarts.init(document.getElementById("chart_20"));
      Echart_2.setOption(option2);
    } else {
      //时间
      const res2 = await getTopicCountByHourses({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec21 = [];
      let ec22 = [];
      res2.data.forEach((item) => {
        if (Number(item.times) !== 0) {
          if (item.name === null) {
            ec21.push("其他");
            ec22.push({ name: "其他", value: Number(item.times) });
          } else {
            ec21.push(item.name);
            ec22.push({ name: item.name, value: Number(item.times) });
          }
        }
      });
      let option2 = chart_20();
      option2.legend.data = ec21;
      option2.series[0].data = ec22;
      Echart_2 = echarts.init(document.getElementById("chart_20"));
      Echart_2.setOption(option2);
    }
  }
};
//咨询服务切换
let zxfwxl = async (ev) => {
  if (flay.value) {
    if (zxfw.value === "1") {
      //人次
      const res8 = await serviceByTimes({
        param1: value1.value,
        param2: value2.value,
      });
      let ec41 = [];
      let ec42 = [];
      res8.data.forEach((item) => {
        ec41.push(item.name);
        ec42.push(item.times);
      });
      const casdata = chart_22(echarts);
      casdata.xAxis.data = ec41;
      casdata.series[0].data = ec42;
      Echart_4 = echarts.init(document.getElementById("chart_22"));
      Echart_4.setOption(casdata);
    } else {
      //时间
      const res = await getHourses({
        param1: value1.value,
        param2: value2.value,
      });
      let ec41 = ["面询", "电话咨询", "驻场咨询"];
      let ec42 = [];
      res.data.forEach((item) => {
        ec42.push(Number(item.total));
      });
      const casdata = chart_22(echarts);
      casdata.xAxis.data = ec41;
      casdata.series[0].data = ec42;
      Echart_4 = echarts.init(document.getElementById("chart_22"));
      Echart_4.setOption(casdata);
    }
  } else {
    if (zxfw.value === "1") {
      //人次
      const res8 = await serviceByTimes({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec41 = [];
      let ec42 = [];
      res8.data.forEach((item) => {
        ec41.push(item.name);
        ec42.push(item.times);
      });
      const casdata = chart_22(echarts);
      casdata.xAxis.data = ec41;
      casdata.series[0].data = ec42;
      Echart_4 = echarts.init(document.getElementById("chart_22"));
      Echart_4.setOption(casdata);
    } else {
      //时间
      const res = await getHourses({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec41 = ["面询", "电话咨询", "驻场咨询"];
      let ec42 = [];
      res.data.forEach((item) => {
        ec42.push(Number(item.total));
      });
      const casdata = chart_22(echarts);
      casdata.xAxis.data = ec41;
      casdata.series[0].data = ec42;
      Echart_4 = echarts.init(document.getElementById("chart_22"));
      Echart_4.setOption(casdata);
    }
  }
};
//咨询人员
let zxryxl = async (ev) => {
  if (flay.value) {
    if (zxry.value === "1") {
      //人次
      //5
      const res9 = await consultPersonInfoByGender({
        param1: value1.value,
        param2: value2.value,
      });
      let ec51 = [];
      let ec52 = [];
      res9.data.forEach((item) => {
        if (item.gender === "0") {
          ec51.push("男");
          ec52.push({ name: "男", value: Number(item.times) });
        } else if (item.gender === "1") {
          ec51.push("女");
          ec52.push({ name: "女", value: Number(item.times) });
        } else {
          ec51.push("未透露");
          ec52.push({ name: "未透露", value: Number(item.times) });
        }
      });
      let option4 = chart_23();
      option4.legend.data = ec51;
      option4.series[0].data = ec52;
      Echart_5 = echarts.init(document.getElementById("chart_23"));
      Echart_5.setOption(option4);
      //6
      const res10 = await consultPersonInfoByAge({
        param1: value1.value,
        param2: value2.value,
      });
      let ec61 = [];
      let ec62 = [];
      res10.data.forEach((item) => {
        ec61.push(item.age);
        ec62.push({ name: item.age, value: Number(item.times) });
      });
      let option5 = chart_24();
      option5.legend.data = ec61;
      option5.series[0].data = ec62;
      Echart_6 = echarts.init(document.getElementById("chart_24"));
      Echart_6.setOption(option5);
      //7
      const res11 = await consultPersonInfoByArea({
        param1: value1.value,
        param2: value2.value,
        type: "times",
      });
      let ec71 = [];
      let ec72 = [];
      res11.data.forEach((item) => {
        ec71.push(item.Area);
        ec72.push({ name: item.Area, value: Number(item.times) });
      });
      let option6 = chart_25();
      option6.legend.data = ec71;
      option6.series[0].data = ec72;
      Echart_7 = echarts.init(document.getElementById("chart_25"));
      Echart_7.setOption(option6);
      //8
      const res12 = await consultPersonInfoByRe({
        param1: value1.value,
        param2: value2.value,
      });
      let ec81 = [];
      let ec82 = [];
      res12.data.forEach((item) => {
        ec81.push(item.CallerEmployeeRe);
        ec82.push({ name: item.CallerEmployeeRe, value: Number(item.times) });
      });
      let option7 = chart_26();
      option7.legend.data = ec81;
      option7.series[0].data = ec82;
      Echart_8 = echarts.init(document.getElementById("chart_26"));
      Echart_8.setOption(option7);
      //9
      const res13 = await consultPersonInfoByCname({
        param1: value1.value,
        param2: value2.value,
        type: "times",
      });
      let ec91 = [];
      let ec92 = [];
      res13.data.forEach((item) => {
        ec91.push(item.name);
        ec92.push({ name: item.name, value: Number(item.times) });
      });
      let option8 = chart_27();
      option8.legend.data = ec91;
      option8.series[0].data = ec92;
      Echart_9 = echarts.init(document.getElementById("chart_27"));
      Echart_9.setOption(option8);
      //10
      const res14 = await consultPersonInfoByDepartment({
        param1: value1.value,
        param2: value2.value,
        type: "times",
      });
      let ec01 = [];
      let ec02 = [];
      res14.data.forEach((item) => {
        //   ec91.push(item.name)
        // ec92.push({ name: item.name, value: Number(item.times) });
      });
      let option9 = chart_28();
      option9.legend.data = ec91;
      option9.series[0].data = ec92;
      Echart_10 = echarts.init(document.getElementById("chart_28"));
      Echart_10.setOption(option9);
    } else if (zxry.value === "2") {
      //时间
      //5
      const res9 = await consultPersonInfoByGender({
        param1: value1.value,
        param2: value2.value,
      });
      let ec51 = [];
      let ec52 = [];
      res9.data.forEach((item) => {
        if (item.gender === "0") {
          ec51.push("男");
          ec52.push({ name: "男", value: Number(item.hourses) });
        } else if (item.gender === "1") {
          ec51.push("女");
          ec52.push({ name: "女", value: Number(item.hourses) });
        } else {
          ec51.push("未透露");
          ec52.push({ name: "未透露", value: Number(item.hourses) });
        }
      });
      let option4 = chart_23();
      option4.legend.data = ec51;
      option4.series[0].data = ec52;
      Echart_5 = echarts.init(document.getElementById("chart_23"));
      Echart_5.setOption(option4);
      //6
      const res10 = await consultPersonInfoByAge({
        param1: value1.value,
        param2: value2.value,
      });
      let ec61 = [];
      let ec62 = [];
      res10.data.forEach((item) => {
        ec61.push(item.age);
        ec62.push({ name: item.age, value: Number(item.hourses) });
      });
      let option5 = chart_24();
      option5.legend.data = ec61;
      option5.series[0].data = ec62;
      Echart_6 = echarts.init(document.getElementById("chart_24"));
      Echart_6.setOption(option5);
      //7
      const res11 = await consultPersonInfoByArea({
        param1: value1.value,
        param2: value2.value,
        type: "hourses",
      });
      let ec71 = [];
      let ec72 = [];
      res11.data.forEach((item) => {
        ec71.push(item.Area);
        ec72.push({ name: item.Area, value: Number(item.hourses) });
      });
      let option6 = chart_25();
      option6.legend.data = ec71;
      option6.series[0].data = ec72;
      Echart_7 = echarts.init(document.getElementById("chart_25"));
      Echart_7.setOption(option6);
      //8
      const res12 = await consultPersonInfoByRe({
        param1: value1.value,
        param2: value2.value,
      });
      let ec81 = [];
      let ec82 = [];
      res12.data.forEach((item) => {
        ec81.push(item.CallerEmployeeRe);
        ec82.push({ name: item.CallerEmployeeRe, value: Number(item.hourses) });
      });
      let option7 = chart_26();
      option7.legend.data = ec81;
      option7.series[0].data = ec82;
      Echart_8 = echarts.init(document.getElementById("chart_26"));
      Echart_8.setOption(option7);
      //9
      const res13 = await consultPersonInfoByCname({
        param1: value1.value,
        param2: value2.value,
        type: "hourses",
      });
      let ec91 = [];
      let ec92 = [];
      res13.data.forEach((item) => {
        ec91.push(item.name);
        ec92.push({ name: item.name, value: Number(item.hourses) });
      });
      let option8 = chart_27();
      option8.legend.data = ec91;
      option8.series[0].data = ec92;
      Echart_9 = echarts.init(document.getElementById("chart_27"));
      Echart_9.setOption(option8);
      //10
      const res14 = await consultPersonInfoByDepartment({
        param1: value1.value,
        param2: value2.value,
        type: "hourses",
      });
      let ec01 = [];
      let ec02 = [];
      res14.data.forEach((item) => {
        //   ec91.push(item.name)
        // ec92.push({ name: item.name, value: Number(item.times) });
      });
      let option9 = chart_28();
      option9.legend.data = ec91;
      option9.series[0].data = ec92;
      Echart_10 = echarts.init(document.getElementById("chart_28"));
      Echart_10.setOption(option9);
    } else {
      //人数
      const res9 = await consultPersonInfoByGender({
        param1: value1.value,
        param2: value2.value,
      });
      let ec51 = [];
      let ec52 = [];
      res9.data.forEach((item) => {
        if (item.gender === "0") {
          ec51.push("男");
          ec52.push({ name: "男", value: Number(item.Peoples) });
        } else if (item.gender === "1") {
          ec51.push("女");
          ec52.push({ name: "女", value: Number(item.Peoples) });
        } else {
          ec51.push("未透露");
          ec52.push({ name: "未透露", value: Number(item.Peoples) });
        }
      });
      let option4 = chart_23();
      option4.legend.data = ec51;
      option4.series[0].data = ec52;
      Echart_5 = echarts.init(document.getElementById("chart_23"));
      Echart_5.setOption(option4);
      //6
      const res10 = await consultPersonInfoByAge({
        param1: value1.value,
        param2: value2.value,
      });
      let ec61 = [];
      let ec62 = [];
      res10.data.forEach((item) => {
        ec61.push(item.age);
        ec62.push({ name: item.age, value: Number(item.Peoples) });
      });
      let option5 = chart_24();
      option5.legend.data = ec61;
      option5.series[0].data = ec62;
      Echart_6 = echarts.init(document.getElementById("chart_24"));
      Echart_6.setOption(option5);
      //7
      const res11 = await consultPersonInfoByArea({
        param1: value1.value,
        param2: value2.value,
        type: "Peoples",
      });
      let ec71 = [];
      let ec72 = [];
      res11.data.forEach((item) => {
        ec71.push(item.Area);
        ec72.push({ name: item.Area, value: Number(item.Peoples) });
      });
      let option6 = chart_25();
      option6.legend.data = ec71;
      option6.series[0].data = ec72;
      Echart_7 = echarts.init(document.getElementById("chart_25"));
      Echart_7.setOption(option6);
      //8
      const res12 = await consultPersonInfoByRe({
        param1: value1.value,
        param2: value2.value,
      });
      let ec81 = [];
      let ec82 = [];
      res12.data.forEach((item) => {
        ec81.push(item.CallerEmployeeRe);
        ec82.push({ name: item.CallerEmployeeRe, value: Number(item.Peoples) });
      });
      let option7 = chart_26();
      option7.legend.data = ec81;
      option7.series[0].data = ec82;
      Echart_8 = echarts.init(document.getElementById("chart_26"));
      Echart_8.setOption(option7);
      //9
      const res13 = await consultPersonInfoByCname({
        param1: value1.value,
        param2: value2.value,
        type: "Peoples",
      });
      let ec91 = [];
      let ec92 = [];
      res13.data.forEach((item) => {
        ec91.push(item.name);
        ec92.push({ name: item.name, value: Number(item.Peoples) });
      });
      let option8 = chart_27();
      option8.legend.data = ec91;
      option8.series[0].data = ec92;
      Echart_9 = echarts.init(document.getElementById("chart_27"));
      Echart_9.setOption(option8);
      //10
      const res14 = await consultPersonInfoByDepartment({
        param1: value1.value,
        param2: value2.value,
        type: "Peoples",
      });
      let ec01 = [];
      let ec02 = [];
      res14.data.forEach((item) => {
        //   ec91.push(item.name)
        // ec92.push({ name: item.name, value: Number(item.times) });
      });
      let option9 = chart_28();
      option9.legend.data = ec91;
      option9.series[0].data = ec92;
      Echart_10 = echarts.init(document.getElementById("chart_28"));
      Echart_10.setOption(option9);
    }
  } else {
    if (zxry.value === "1") {
      //人次
      //5
      const res9 = await consultPersonInfoByGender({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec51 = [];
      let ec52 = [];
      res9.data.forEach((item) => {
        if (item.gender === "0") {
          ec51.push("男");
          ec52.push({ name: "男", value: Number(item.times) });
        } else if (item.gender === "1") {
          ec51.push("女");
          ec52.push({ name: "女", value: Number(item.times) });
        } else {
          ec51.push("未透露");
          ec52.push({ name: "未透露", value: Number(item.times) });
        }
      });
      let option4 = chart_23();
      option4.legend.data = ec51;
      option4.series[0].data = ec52;
      Echart_5 = echarts.init(document.getElementById("chart_23"));
      Echart_5.setOption(option4);
      //6
      const res10 = await consultPersonInfoByAge({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec61 = [];
      let ec62 = [];
      res10.data.forEach((item) => {
        ec61.push(item.age);
        ec62.push({ name: item.age, value: Number(item.times) });
      });
      let option5 = chart_24();
      option5.legend.data = ec61;
      option5.series[0].data = ec62;
      Echart_6 = echarts.init(document.getElementById("chart_24"));
      Echart_6.setOption(option5);
      //7
      const res11 = await consultPersonInfoByArea({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
        type: "times",
      });
      let ec71 = [];
      let ec72 = [];
      res11.data.forEach((item) => {
        ec71.push(item.Area);
        ec72.push({ name: item.Area, value: Number(item.times) });
      });
      let option6 = chart_25();
      option6.legend.data = ec71;
      option6.series[0].data = ec72;
      Echart_7 = echarts.init(document.getElementById("chart_25"));
      Echart_7.setOption(option6);
      //8
      const res12 = await consultPersonInfoByRe({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec81 = [];
      let ec82 = [];
      res12.data.forEach((item) => {
        ec81.push(item.CallerEmployeeRe);
        ec82.push({ name: item.CallerEmployeeRe, value: Number(item.times) });
      });
      let option7 = chart_26();
      option7.legend.data = ec81;
      option7.series[0].data = ec82;
      Echart_8 = echarts.init(document.getElementById("chart_26"));
      Echart_8.setOption(option7);
      //9
      const res13 = await consultPersonInfoByCname({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
        type: "times",
      });
      let ec91 = [];
      let ec92 = [];
      res13.data.forEach((item) => {
        ec91.push(item.name);
        ec92.push({ name: item.name, value: Number(item.times) });
      });
      let option8 = chart_27();
      option8.legend.data = ec91;
      option8.series[0].data = ec92;
      Echart_9 = echarts.init(document.getElementById("chart_27"));
      Echart_9.setOption(option8);
      //10
      const res14 = await consultPersonInfoByDepartment({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
        type: "times",
      });
      let ec01 = [];
      let ec02 = [];
      res14.data.forEach((item) => {
        //   ec91.push(item.name)
        // ec92.push({ name: item.name, value: Number(item.times) });
      });
      let option9 = chart_28();
      option9.legend.data = ec91;
      option9.series[0].data = ec92;
      Echart_10 = echarts.init(document.getElementById("chart_28"));
      Echart_10.setOption(option9);
    } else if (zxry.value === "2") {
      //时间
      //5
      const res9 = await consultPersonInfoByGender({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec51 = [];
      let ec52 = [];
      res9.data.forEach((item) => {
        if (item.gender === "0") {
          ec51.push("男");
          ec52.push({ name: "男", value: Number(item.hourses) });
        } else if (item.gender === "1") {
          ec51.push("女");
          ec52.push({ name: "女", value: Number(item.hourses) });
        } else {
          ec51.push("未透露");
          ec52.push({ name: "未透露", value: Number(item.hourses) });
        }
      });
      let option4 = chart_23();
      option4.legend.data = ec51;
      option4.series[0].data = ec52;
      Echart_5 = echarts.init(document.getElementById("chart_23"));
      Echart_5.setOption(option4);
      //6
      const res10 = await consultPersonInfoByAge({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec61 = [];
      let ec62 = [];
      res10.data.forEach((item) => {
        ec61.push(item.age);
        ec62.push({ name: item.age, value: Number(item.hourses) });
      });
      let option5 = chart_24();
      option5.legend.data = ec61;
      option5.series[0].data = ec62;
      Echart_6 = echarts.init(document.getElementById("chart_24"));
      Echart_6.setOption(option5);
      //7
      const res11 = await consultPersonInfoByArea({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
        type: "hourses",
      });
      let ec71 = [];
      let ec72 = [];
      res11.data.forEach((item) => {
        ec71.push(item.Area);
        ec72.push({ name: item.Area, value: Number(item.hourses) });
      });
      let option6 = chart_25();
      option6.legend.data = ec71;
      option6.series[0].data = ec72;
      Echart_7 = echarts.init(document.getElementById("chart_25"));
      Echart_7.setOption(option6);
      //8
      const res12 = await consultPersonInfoByRe({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec81 = [];
      let ec82 = [];
      res12.data.forEach((item) => {
        ec81.push(item.CallerEmployeeRe);
        ec82.push({ name: item.CallerEmployeeRe, value: Number(item.hourses) });
      });
      let option7 = chart_26();
      option7.legend.data = ec81;
      option7.series[0].data = ec82;
      Echart_8 = echarts.init(document.getElementById("chart_26"));
      Echart_8.setOption(option7);
      //9
      const res13 = await consultPersonInfoByCname({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
        type: "hourses",
      });
      let ec91 = [];
      let ec92 = [];
      res13.data.forEach((item) => {
        ec91.push(item.name);
        ec92.push({ name: item.name, value: Number(item.hourses) });
      });
      let option8 = chart_27();
      option8.legend.data = ec91;
      option8.series[0].data = ec92;
      Echart_9 = echarts.init(document.getElementById("chart_27"));
      Echart_9.setOption(option8);
      //10
      const res14 = await consultPersonInfoByDepartment({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
        type: "hourses",
      });
      let ec01 = [];
      let ec02 = [];
      res14.data.forEach((item) => {
        //   ec91.push(item.name)
        // ec92.push({ name: item.name, value: Number(item.times) });
      });
      let option9 = chart_28();
      option9.legend.data = ec91;
      option9.series[0].data = ec92;
      Echart_10 = echarts.init(document.getElementById("chart_28"));
      Echart_10.setOption(option9);
    } else {
      //人数
      const res9 = await consultPersonInfoByGender({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec51 = [];
      let ec52 = [];
      res9.data.forEach((item) => {
        if (item.gender === "0") {
          ec51.push("男");
          ec52.push({ name: "男", value: Number(item.Peoples) });
        } else if (item.gender === "1") {
          ec51.push("女");
          ec52.push({ name: "女", value: Number(item.Peoples) });
        } else {
          ec51.push("未透露");
          ec52.push({ name: "未透露", value: Number(item.Peoples) });
        }
      });
      let option4 = chart_23();
      option4.legend.data = ec51;
      option4.series[0].data = ec52;
      Echart_5 = echarts.init(document.getElementById("chart_23"));
      Echart_5.setOption(option4);
      //6
      const res10 = await consultPersonInfoByAge({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec61 = [];
      let ec62 = [];
      res10.data.forEach((item) => {
        ec61.push(item.age);
        ec62.push({ name: item.age, value: Number(item.Peoples) });
      });
      let option5 = chart_24();
      option5.legend.data = ec61;
      option5.series[0].data = ec62;
      Echart_6 = echarts.init(document.getElementById("chart_24"));
      Echart_6.setOption(option5);
      //7
      const res11 = await consultPersonInfoByArea({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
        type: "Peoples",
      });
      let ec71 = [];
      let ec72 = [];
      res11.data.forEach((item) => {
        ec71.push(item.Area);
        ec72.push({ name: item.Area, value: Number(item.Peoples) });
      });
      let option6 = chart_25();
      option6.legend.data = ec71;
      option6.series[0].data = ec72;
      Echart_7 = echarts.init(document.getElementById("chart_25"));
      Echart_7.setOption(option6);
      //8
      const res12 = await consultPersonInfoByRe({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
      });
      let ec81 = [];
      let ec82 = [];
      res12.data.forEach((item) => {
        ec81.push(item.CallerEmployeeRe);
        ec82.push({ name: item.CallerEmployeeRe, value: Number(item.Peoples) });
      });
      let option7 = chart_26();
      option7.legend.data = ec81;
      option7.series[0].data = ec82;
      Echart_8 = echarts.init(document.getElementById("chart_26"));
      Echart_8.setOption(option7);
      //9
      const res13 = await consultPersonInfoByCname({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
        type: "Peoples",
      });
      let ec91 = [];
      let ec92 = [];
      res13.data.forEach((item) => {
        ec91.push(item.name);
        ec92.push({ name: item.name, value: Number(item.Peoples) });
      });
      let option8 = chart_27();
      option8.legend.data = ec91;
      option8.series[0].data = ec92;
      Echart_9 = echarts.init(document.getElementById("chart_27"));
      Echart_9.setOption(option8);
      //10
      const res14 = await consultPersonInfoByDepartment({
        startTime: riqi.value[0],
        endTime: riqi.value[1],
        type: "Peoples",
      });
      let ec01 = [];
      let ec02 = [];
      res14.data.forEach((item) => {
        //   ec91.push(item.name)
        // ec92.push({ name: item.name, value: Number(item.times) });
      });
      let option9 = chart_28();
      option9.legend.data = ec91;
      option9.series[0].data = ec92;
      Echart_10 = echarts.init(document.getElementById("chart_28"));
      Echart_10.setOption(option9);
    }
  }
};
//查询
const cx = async () => {
  if (flay.value) {
    eac("查询");
  } else {
    clearTimeout(tsy.value);
      breakoff.value=false
    tsy.value = setTimeout(() => {
      if (loding.value) {
        loding.value = false;
        MessagePlugin.closeAll();
        MessagePlugin.error("加载超时,请刷新页面重试！");
      }
    }, 20000);
    loding.value = true;
    MessagePlugin.loading("正在查询中....", 0);
    const res = await getHourses({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    const res1 = await totalNumber({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    const res2 = await cases({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    const res3 = await managerConsult({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    const res4 = await hotline({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    zxtime.timez = 0;
    res.data.forEach((item) => {
      zxtime.timez += Number(item.total);
    });
    if (res.data[0] !== undefined) {
      zxtime.timem = Number(res.data[0].total);
    }
    if (res.data[1] !== undefined) {
      zxtime.times = Number(res.data[1].total);
    }
    if (res.data[2] !== undefined) {
      zxtime.timezc = Number(res.data[2].total);
    }
    zx2.value = res1.data.Peoples;
    zx3.zx31 = res2.data[0].number;
    zx3.zx32 = res2.data[1].number;
    zx3.zx33 = Number(res2.data[0].number) + Number(res2.data[1].number);
    zx4.value = res3.data[0].number;
    zx5.value = res4.data;
    //图表渲染
    //1
    const res5 = await trend({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    let ec11 = [];
    let ec12 = [];
    let ec13 = [];
    let ec14 = [];
    res5.data.forEach((item, index) => {
      if (index % 3 === 0) {
        ec11.push(item.date);
        ec12.push(item.times);
        ec13.push(item.peoples);
        ec14.push(item.hourses);
      }
    });
    let option1 = chart_19();
    option1.xAxis.data = ec11;
    option1.series[0].data = ec14;
    option1.series[1].data = ec13;
    option1.series[2].data = ec12;
    Echart_1 = echarts.init(document.getElementById("chart_19"));
    Echart_1.setOption(option1);
    //2
    const res6 = await getTopicCountByTimes({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    let ec21 = [];
    let ec22 = [];
    res6.data.forEach((item) => {
      if (Number(item.times) !== 0) {
        if (item.name === null) {
          ec21.push("其他");
          ec22.push({ name: "其他", value: Number(item.times) });
        } else {
          ec21.push(item.name);
          ec22.push({ name: item.name, value: Number(item.times) });
        }
      }
    });
    let option2 = chart_20();
    option2.legend.data = ec21;
    option2.series[0].data = ec22;
    Echart_2 = echarts.init(document.getElementById("chart_20"));
    Echart_2.setOption(option2);
    //3
    const res7 = await crisis({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    let ec31 = [];
    let ec32 = [];
    res7.data.forEach((item) => {
      ec31.push(item.name);
      ec32.push({ name: item.name, value: Number(item.times) });
    });
    let option3 = chart_21();
    option3.legend.data = ec31;
    option3.series[0].data = ec32;
    Echart_3 = echarts.init(document.getElementById("chart_21"));
    Echart_3.setOption(option3);
    //4
    const res8 = await serviceByTimes({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    let ec41 = [];
    let ec42 = [];
    res8.data.forEach((item) => {
      ec41.push(item.name);
      ec42.push(item.times);
    });
    const casdata = chart_22(echarts);
    casdata.xAxis.data = ec41;
    casdata.series[0].data = ec42;
    Echart_4 = echarts.init(document.getElementById("chart_22"));
    Echart_4.setOption(casdata);
    //5
    const res9 = await consultPersonInfoByGender({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    let ec51 = [];
    let ec52 = [];
    res9.data.forEach((item) => {
      if (item.gender === "0") {
        ec51.push("男");
        ec52.push({ name: "男", value: Number(item.times) });
      } else if (item.gender === "1") {
        ec51.push("女");
        ec52.push({ name: "女", value: Number(item.times) });
      } else {
        ec51.push("未透露");
        ec52.push({ name: "未透露", value: Number(item.times) });
      }
    });
    let option4 = chart_23();
    option4.legend.data = ec51;
    option4.series[0].data = ec52;
    Echart_5 = echarts.init(document.getElementById("chart_23"));
    Echart_5.setOption(option4);
    //6
    const res10 = await consultPersonInfoByAge({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    let ec61 = [];
    let ec62 = [];
    res10.data.forEach((item) => {
      ec61.push(item.age);
      ec62.push({ name: item.age, value: Number(item.times) });
    });
    let option5 = chart_24();
    option5.legend.data = ec61;
    option5.series[0].data = ec62;
    Echart_6 = echarts.init(document.getElementById("chart_24"));
    Echart_6.setOption(option5);
    //7
    const res11 = await consultPersonInfoByArea({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
      type: "times",
    });
    let ec71 = [];
    let ec72 = [];
    res11.data.forEach((item) => {
      ec71.push(item.Area);
      ec72.push({ name: item.Area, value: Number(item.times) });
    });
    let option6 = chart_25();
    option6.legend.data = ec71;
    option6.series[0].data = ec72;
    Echart_7 = echarts.init(document.getElementById("chart_25"));
    Echart_7.setOption(option6);
    //8
    const res12 = await consultPersonInfoByRe({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
    });
    let ec81 = [];
    let ec82 = [];
    res12.data.forEach((item) => {
      ec81.push(item.CallerEmployeeRe);
      ec82.push({ name: item.CallerEmployeeRe, value: Number(item.times) });
    });
    let option7 = chart_26();
    option7.legend.data = ec81;
    option7.series[0].data = ec82;
    Echart_8 = echarts.init(document.getElementById("chart_26"));
    Echart_8.setOption(option7);
    //9
    const res13 = await consultPersonInfoByCname({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
      type: "times",
    });
    let ec91 = [];
    let ec92 = [];
    res13.data.forEach((item) => {
      ec91.push(item.name);
      ec92.push({ name: item.name, value: Number(item.times) });
    });
    let option8 = chart_27();
    option8.legend.data = ec91;
    option8.series[0].data = ec92;
    Echart_9 = echarts.init(document.getElementById("chart_27"));
    Echart_9.setOption(option8);
    //10
    const res14 = await consultPersonInfoByDepartment({
      startTime: riqi.value[0],
      endTime: riqi.value[1],
      type: "times",
    });
    let ec01 = [];
    let ec02 = [];
    res14.data.forEach((item) => {
      //   ec91.push(item.name)
      // ec92.push({ name: item.name, value: Number(item.times) });
    });
    // let option9 = chart_28();
    // option9.legend.data = ec91;
    // option9.series[0].data = ec92;
    // Echart_10 = echarts.init(document.getElementById("chart_28"));
    // Echart_10.setOption(option9);
    loding.value = false;
      breakoff.value=true
    MessagePlugin.closeAll();
    MessagePlugin.success("查询成功");
  }
};
const eac = async (jzzd) => {
  //请求
  //上
  loding.value = true;
  breakoff.value=false
  MessagePlugin.loading("正在" + jzzd + "中....", 0);
  clearTimeout(tsy.value);
  tsy.value = setTimeout(() => {
    if (loding.value) {
      loding.value = false;
      MessagePlugin.closeAll();
      MessagePlugin.error("加载超时,请刷新页面重试！");
    }
  }, 20000);
  const res = await getHourses({
    param1: value1.value,
    param2: value2.value,
  });
  const res1 = await totalNumber({
    param1: value1.value,
    param2: value2.value,
  });
  const res2 = await cases({
    param1: value1.value,
    param2: value2.value,
  });
  const res3 = await managerConsult({
    param1: value1.value,
    param2: value2.value,
  });
  const res4 = await hotline({
    param1: value1.value,
    param2: value2.value,
  });
  zxtime.timez = 0;
  res.data.forEach((item) => {
    zxtime.timez += Number(item.total);
  });
  if (res.data[0] !== undefined) {
    zxtime.timem = Number(res.data[0].total);
  }
  if (res.data[1] !== undefined) {
    zxtime.times = Number(res.data[1].total);
  }
  if (res.data[2] !== undefined) {
    zxtime.timezc = Number(res.data[2].total);
  }
  zx2.value = res1.data.Peoples;
  if (res2.data[0] !== undefined) {
    zx3.zx31 = res2.data[0].number;
  }
  if (res2.data[1] !== undefined) {
    zx3.zx32 = res2.data[1].number;
  }
  zx3.zx33 = 0;
  res2.data.forEach((item) => {
    zx3.zx33 += Number(item.number);
  });
  zx4.value = res3.data[0].number;
  zx5.value = res4.data;
  //下
  //图表渲染
  //1
  const res5 = await trend({
    param1: value1.value,
    param2: value2.value,
  });
  let ec11 = [];
  let ec12 = [];
  let ec13 = [];
  let ec14 = [];

  if (value2.value === "30") {
    res5.data.forEach((item, index) => {
      if (index % 3 === 0) {
        ec11.push(item.date);
        ec12.push(item.times);
        ec13.push(item.peoples);
        ec14.push(item.hourses);
      }
    });
  } else if (value2.value === "90") {
    res5.data.forEach((item, index) => {
      if (index % 9 === 0) {
        ec11.push(item.date);
        ec12.push(item.times);
        ec13.push(item.peoples);
        ec14.push(item.hourses);
      }
    });
  } else {
    res5.data.forEach((item) => {
      ec11.push(item.date);
      ec12.push(item.times);
      ec13.push(item.peoples);
      ec14.push(item.hourses);
    });
  }
  let option1 = chart_19();
  option1.xAxis.data = ec11;
  option1.series[0].data = ec14;
  option1.series[1].data = ec13;
  option1.series[2].data = ec12;
  Echart_1 = echarts.init(document.getElementById("chart_19"));
  Echart_1.setOption(option1);
  //2
  const res6 = await getTopicCountByTimes({
    param1: value1.value,
    param2: value2.value,
  });
  let ec21 = [];
  let ec22 = [];
  res6.data.forEach((item) => {
    if (Number(item.times) !== 0) {
      if (item.name === null) {
        ec21.push("其他");
        ec22.push({ name: "其他", value: Number(item.times) });
      } else {
        ec21.push(item.name);
        ec22.push({ name: item.name, value: Number(item.times) });
      }
    }
  });
  let option2 = chart_20();
  option2.legend.data = ec21;
  option2.series[0].data = ec22;
  Echart_2 = echarts.init(document.getElementById("chart_20"));
  Echart_2.setOption(option2);
  //3
  const res7 = await crisis({
    param1: value1.value,
    param2: value2.value,
  });
  let ec31 = [];
  let ec32 = [];
  res7.data.forEach((item) => {
    ec31.push(item.name);
    ec32.push({ name: item.name, value: Number(item.times) });
  });
  let option3 = chart_21();
  option3.legend.data = ec31;
  option3.series[0].data = ec32;
  Echart_3 = echarts.init(document.getElementById("chart_21"));
  Echart_3.setOption(option3);
  //4
  const res8 = await serviceByTimes({
    param1: value1.value,
    param2: value2.value,
  });
  let ec41 = [];
  let ec42 = [];
  res8.data.forEach((item) => {
    ec41.push(item.name);
    ec42.push(item.times);
  });
  const casdata = chart_22(echarts);
  casdata.xAxis.data = ec41;
  casdata.series[0].data = ec42;
  Echart_4 = echarts.init(document.getElementById("chart_22"));
  Echart_4.setOption(casdata);
  //5
  const res9 = await consultPersonInfoByGender({
    param1: value1.value,
    param2: value2.value,
  });
  let ec51 = [];
  let ec52 = [];
  res9.data.forEach((item) => {
    if (item.gender === "0") {
      ec51.push("男");
      ec52.push({ name: "男", value: Number(item.times) });
    } else if (item.gender === "1") {
      ec51.push("女");
      ec52.push({ name: "女", value: Number(item.times) });
    } else {
      ec51.push("未透露");
      ec52.push({ name: "未透露", value: Number(item.times) });
    }
  });
  let option4 = chart_23();
  option4.legend.data = ec51;
  option4.series[0].data = ec52;
  Echart_5 = echarts.init(document.getElementById("chart_23"));
  Echart_5.setOption(option4);
  //6
  const res10 = await consultPersonInfoByAge({
    param1: value1.value,
    param2: value2.value,
  });
  let ec61 = [];
  let ec62 = [];
  res10.data.forEach((item) => {
    ec61.push(item.age);
    ec62.push({ name: item.age, value: Number(item.times) });
  });
  let option5 = chart_24();
  option5.legend.data = ec61;
  option5.series[0].data = ec62;
  Echart_6 = echarts.init(document.getElementById("chart_24"));
  Echart_6.setOption(option5);
  //7
  const res11 = await consultPersonInfoByArea({
    param1: value1.value,
    param2: value2.value,
    type: "times",
  });
  let ec71 = [];
  let ec72 = [];
  res11.data.forEach((item) => {
    ec71.push(item.Area);
    ec72.push({ name: item.Area, value: Number(item.times) });
  });
  let option6 = chart_25();
  option6.legend.data = ec71;
  option6.series[0].data = ec72;
  Echart_7 = echarts.init(document.getElementById("chart_25"));
  Echart_7.setOption(option6);
  //8
  const res12 = await consultPersonInfoByRe({
    param1: value1.value,
    param2: value2.value,
  });
  let ec81 = [];
  let ec82 = [];
  res12.data.forEach((item) => {
    ec81.push(item.CallerEmployeeRe);
    ec82.push({ name: item.CallerEmployeeRe, value: Number(item.times) });
  });
  let option7 = chart_26();
  option7.legend.data = ec81;
  option7.series[0].data = ec82;
  Echart_8 = echarts.init(document.getElementById("chart_26"));
  Echart_8.setOption(option7);
  //9
  const res13 = await consultPersonInfoByCname({
    param1: value1.value,
    param2: value2.value,
    type: "times",
  });
  let ec91 = [];
  let ec92 = [];
  res13.data.forEach((item) => {
    ec91.push(item.name);
    ec92.push({ name: item.name, value: Number(item.times) });
  });
  let option8 = chart_27();
  option8.legend.data = ec91;
  option8.series[0].data = ec92;
  Echart_9 = echarts.init(document.getElementById("chart_27"));
  Echart_9.setOption(option8);
  //10
  const res14 = await consultPersonInfoByDepartment({
    param1: value1.value,
    param2: value2.value,
    type: "times",
  });
  let ec01 = [];
  let ec02 = [];
  res14.data.forEach((item) => {
    //   ec91.push(item.name)
    // ec92.push({ name: item.name, value: Number(item.times) });
  });
  // let option9 = chart_28();
  // option9.legend.data = ec91;
  // option9.series[0].data = ec92;
  // Echart_10 = echarts.init(document.getElementById("chart_28"));
  // Echart_10.setOption(option9);
  setTimeout(() => {
    Echart_1.resize();
    Echart_2.resize();
    Echart_3.resize();
    Echart_4.resize();
    Echart_5.resize();
    Echart_6.resize();
    Echart_7.resize();
    Echart_8.resize();
    Echart_9.resize();
    // Echart_10.resize();
  }, 0);
  loding.value = false;
  MessagePlugin.closeAll();
  breakoff.value=true
  MessagePlugin.success("" + jzzd + "成功！");
};
//处理组织架构
const zzinput = async () => {
  const res = await getOrg({
    customerID: 706,
  });
  let arr1 = [];
  arr1.push({ value: "1", label: "全部" });
  res.data.forEach((item) => {
    arr1.push({ value: item.id, label: item.name });
  });
  options2.value = arr1;
};
onMounted(async () => {
  riqijs();
  zzinput();
  window.onresize = function () {
    Echart_1.resize();
    Echart_2.resize();
    Echart_3.resize();
    Echart_4.resize();
    Echart_5.resize();
    Echart_6.resize();
    Echart_7.resize();
    Echart_8.resize();
    Echart_9.resize();
    // Echart_10.resize();
  };
});
onActivated(()=>{
 //缓存页面再启动函数
 if( breakoff.value!==true){
  eac("加载")
 }
   window.onresize = function () {
    Echart_1.resize();
    Echart_2.resize();
    Echart_3.resize();
    Echart_4.resize();
    Echart_5.resize();
    Echart_6.resize();
    Echart_7.resize();
    Echart_8.resize();
    Echart_9.resize();
    // Echart_10.resize();
  };

})
onDeactivated(()=>{
 //缓存页面暂离函数
  clearTimeout(tsy.value);
  MessagePlugin.closeAll();
})
onUnmounted(() => {
  clearTimeout(tsy.value);
   MessagePlugin.closeAll();
  if (Echart_1.value !== null) {
    Echart_1.dispose();
  }
  if (Echart_2.value !== null) {
    Echart_2.dispose();
  }
  if (Echart_3.value !== null) {
    Echart_3.dispose();
  }
  if (Echart_4.value !== null) {
    Echart_4.dispose();
  }
  if (Echart_5.value !== null) {
    Echart_5.dispose();
  }
  if (Echart_6.value !== null) {
    Echart_6.dispose();
  }

  if (Echart_7.value !== null) {
    Echart_7.dispose();
  }
  if (Echart_8.value !== null) {
    Echart_8.dispose();
  }
  if (Echart_9.value !== null) {
    Echart_9.dispose();
  }
  // if (Echart_10.value !== null) {
  //   Echart_10.dispose();
  // }
  MessagePlugin.closeAll();
});
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  .blaek {
    position: absolute;
    right: 0;
    top: -20px;
    z-index: 11;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.5);
  }
  width: calc(100% - 30px);
  padding-left: 20px;
  .top_box {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
  }
  .el-menu--horizontal {
    border-bottom: none;
  }
  .top_in {
    width: 100%;
    margin-left: 10px;
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    .ingj {
      margin-left: 10px;
      .el-select {
        width: 100px !important;
        margin-right: 10px;
      }
    }
    .btn {
      width: 150px;
      height: 30px;
      justify-content: space-between;
      .el-button {
        width: 55px;
      }
    }
  }
  .zhuyao {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
    .el-select {
      width: 100px !important;
      margin-right: 20px;
    }
    .til {
      font-size: 14px;
      margin-left: 20px;
      text-indent: 5px;
    }
    .tilbox {
      // width: 40%;
      height: 80px;
      // margin-left: 60px;
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      .tiitem {
        position: relative;
        cursor: pointer;
        width: 30%;
        height: 100%;
        text-align: center;
        font-size: 35px;
        font-weight: bold;
        color: #409eff;
        .hov1 {
          position: absolute;
          left: 27px;
          top: 60px;
          border-radius: 5px;
          padding: 20px 20px;
          font-size: 18px;
          color: #000;
          display: none;

          z-index: 2;
          white-space: nowrap;
          background: #f3f3f3;
          border: solid 1px #000;
          .item_c {
            width: 70px;
            height: 70px;
            margin-right: 20px;
            text-align: center;
            float: left;
            .ad {
              font-weight: bold;
              color: #409eff;
            }
            .eas {
              font-size: 12px;
              font-weight: bold;
              color: #000;
            }
          }
        }
        .niuw {
          font-size: 14px;
          color: #000;
          font-weight: 500;
        }
        .wen {
          position: relative;
          width: 10px;
          height: 10px;
          left: 5px;
          line-height: 10px;
          text-indent: 5px;
          background: #409eff;
          text-align: center;
          border-radius: 50%;
          font-size: 12px;
          color: #fff;
          cursor: pointer;
          .hov {
            position: absolute;
            left: -34px;
            top: 24px;
            border-radius: 5px;
            padding-left: 20px;
            padding-right: 20px;
            font-size: 14px;
            height: 50px;
            line-height: 50px;
            color: #000;
            display: none;
            white-space: nowrap;
            background: rgb(255, 233, 204);
          }
        }
        .wen:hover {
          .hov {
            display: block;
          }
        }
      }
      .tiitem:hover {
        .hov1 {
          display: block;
        }
      }
    }
  }
  .each_title {
    // border-left: 4px solid;
    // border-image: linear-gradient(
    //     to bottom,
    //     rgb(124, 100, 199) 20%,
    //     rgb(59, 182, 254) 70%
    //   )
    //   1;
  }
  .eca {
    width: 95%;
    height: 300px;
    margin: auto;
    margin-top: 20px;
    div {
      width: 100%;
      height: 100%;
    }
  }
  .boxtj {
    margin: auto;
    margin-top: 15px;
    margin-left: 20px;
    display: flex;
    flex-flow: row wrap;
    gap: 15px;
    .zijibox {
      position: relative;
      width: 120px;
      height: 100px;
      padding-left: 20px;
      padding-right: 20px;
      border-radius: 10px;
      text-align: center;
      font-size: 33px;
      color: #409eff;
      border: solid 2px #000;
      .dhwid {
        width: 100%;
        font-size: 14px;
        margin-top: 10px;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .xx {
        position: absolute;
        right: 10px;
        top: 9px;
      }
    }
    .zijibox1 {
      margin-top: 45px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.boxgg {
  width: 100%;
  display: flex;
  margin-top: -10px;
  justify-content: space-between;
}
.baitiao {
  position: absolute;
  width: 100%;
  height: 11px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  left: 0;
  bottom: -7px;
}
.echats-box {
  width: 49.5%;
  height: 100%;
  position: relative;
  .echats-title {
    padding: 0 5px;
    position: relative;
    top: 25px;
    line-height: 3;
    left: auto;
    z-index: 10;
    text-indent: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #fff;
  }
}
.echats-item {
  flex: none;
  width: 100%;
  height: 440px;
  border-radius: 10px;
  background: rgb(247, 247, 247);
  div {
    width: 100%;
    height: 100%;
  }
}
.eca_1 {
  width: 95%;
  height: 1000px;
  margin: auto;
  margin-top: 20px;
  .casboxq {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-around;
    div {
      width: 32%;
      height: 100%;
      //   background: red;
    }
  }
}
</style>
